<template>
  <div class="bilibili-state">
    <div class="state-row">
      <div>
        <p>关注数</p>
        <div class="bilibili-num">{{ following }}</div>
      </div>
      <div>
        <p>粉丝数</p>
        <div class="bilibili-num">{{ follower }}</div>
      </div>
    </div>
    <span class="avatar-wrapper">
      <img src="~@/assets/dio.jpg" alt="" />
      <a target="_blank" :href="myLink">{{ myName }}</a>
    </span>
    <div class="state-row">
      <div>
        <p>获赞数</p>
        <div class="bilibili-num">{{ likes }}</div>
      </div>
      <div>
        <p>播放数</p>
        <div class="bilibili-num">{{ plays }}</div>
      </div>
    </div>
    <svg
      viewBox="0 0 2194 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="60"
      height="60"
      style="
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
      "
    >
      <path
        d="M1711.543 741.181c-14.629-14.629-34.133-24.381-48.762-34.133-48.762-24.381-102.4-43.886-156.038-53.638-53.638-9.753-112.153-19.505-170.667-14.629-9.752 0-14.628 0-24.38 4.876-24.382-204.8-34.134-404.724-24.382-609.524-63.39 19.505-117.028 48.762-175.543 68.267 58.515 297.448 92.648 594.895 117.029 897.219h19.505c43.885 0 82.895 0 126.78-9.752 53.639-4.877 107.277-19.505 160.915-34.134 53.638-19.504 102.4-39.01 141.41-78.019 24.38-19.504 43.885-39.01 48.761-68.266 14.629-24.381 9.753-48.762-14.628-68.267z m-297.448 165.79c-9.752-58.514-14.628-112.152-24.38-165.79 58.514 14.629 112.152 39.01 165.79 58.514-43.886 39.01-92.648 73.143-141.41 107.276zM614.4 736.305c-19.505-14.629-34.133-24.381-53.638-34.134-48.762-24.38-102.4-39.01-156.038-48.761-53.638-9.753-107.276-14.629-160.914-9.753-9.753 0-14.629 0-24.381 4.876-24.381-204.8-39.01-409.6-29.258-614.4C131.657 48.762 73.143 82.895 19.505 102.4c58.514 297.448 92.647 594.895 117.028 897.219h19.505c82.895 0 160.914-9.752 238.933-29.257 63.39-14.629 126.781-43.886 180.42-82.895 24.38-19.505 48.761-43.886 58.514-73.143 14.628-29.257 4.876-53.638-19.505-78.02zM316.952 906.97c-9.752-58.514-14.628-112.152-24.38-165.79 19.504 0 146.285 48.762 160.914 58.514-39.01 39.01-87.772 73.143-136.534 107.276z m599.772-185.295c-4.876-43.886-4.876-82.895-9.753-126.78-4.876-48.763-9.752-102.4-9.752-151.163-4.876-43.885-4.876-92.647-9.752-136.533-4.877-48.762-4.877-97.524-9.753-146.286 0-14.628 0-14.628-14.628-14.628h-4.876c-19.505 0-39.01 0-53.639 4.876-14.628 0-29.257 4.876-43.885 4.876 43.885 243.81 68.266 492.495 92.647 741.181 29.257 0 58.515 4.876 87.772 4.876V882.59c-19.505-58.514-24.381-107.276-24.381-160.914z m1097.143 39.01c-4.877-48.762-9.753-92.648-9.753-141.41-4.876-48.762-9.752-102.4-14.628-151.162-4.876-48.762-4.876-92.647-9.753-141.41-4.876-58.514-9.752-112.152-9.752-170.666 0-14.628 0-14.628-14.629-14.628h-43.885c-19.505 0-39.01 4.876-63.39 9.752 43.885 243.81 68.266 492.495 92.647 741.18 29.257 0 58.514 4.877 87.771 4.877v-4.876l-14.628-131.657z m-151.162-102.4c-4.876-39.01-9.753-82.896-19.505-121.905 0-9.752-4.876-9.752-9.752-9.752h-48.762c-19.505 4.876-39.01 4.876-63.39 9.752 24.38 131.657 53.637 263.314 78.018 394.971 29.257-4.876 58.515-4.876 87.772-9.752-4.876-34.133-4.876-63.39-9.753-92.648-4.876-53.638-9.752-112.152-14.628-170.666z m-1097.143 0c-4.876-39.01-9.752-78.02-14.629-121.905 0-9.752-4.876-9.752-14.628-9.752-24.381 0-48.762 4.876-68.267 4.876-14.628 0-24.38 4.876-39.01 9.752 24.382 131.657 53.639 263.314 78.02 394.972 29.257-4.877 58.514-4.877 87.771-9.753V921.6c-4.876-34.133-4.876-73.143-9.752-107.276-9.753-53.638-14.629-107.276-19.505-156.038z m312.076-102.4c0-14.629 0-14.629-14.628-14.629-34.134-4.876-68.267 0-107.277 0 14.629 136.533 24.381 268.19 39.01 399.848h87.771v-14.629c0-121.905 0-243.81-4.876-370.59z m1102.02 238.933c0-78.019-4.877-156.038-4.877-238.933 0-14.629 0-14.629-14.629-14.629-34.133-4.876-73.142 0-107.276 0 14.629 136.533 24.381 268.19 39.01 399.848h87.771v-9.753c4.876-43.885 4.876-87.771 0-136.533zM668.037 380.343c4.876 29.257 9.752 63.39 9.752 92.647l4.877 4.877c14.628 0 34.133 0 48.762-4.877 0-19.504-4.877-34.133-4.877-48.761-4.876-34.134-4.876-63.39-9.752-97.524l-4.876-4.876c-14.629-4.877-34.134-4.877-53.638 0v9.752c9.752 19.505 9.752 34.133 9.752 48.762z m1116.648 97.524c14.628 0 34.133 0 48.762-4.877 0-19.504-4.877-34.133-4.877-53.638-4.876-29.257-4.876-63.39-9.752-92.647 0 0 0-4.876-4.876-4.876-19.505-4.877-34.133-4.877-53.638 0v4.876c4.876 48.762 9.752 97.524 19.505 146.285 0 4.877 4.876 4.877 4.876 4.877zM1024 482.743c0 4.876 0 4.876 4.876 4.876h48.762V351.086c0-9.753 0-9.753-9.752-14.629-14.629 0-29.257 0-43.886-4.876v151.162z m1102.019 9.752h48.762V346.21l-4.876-4.877c-19.505 0-34.134-4.876-53.638-4.876v4.876c0 48.762 0 97.524 4.876 146.286 0 4.876 4.876 4.876 4.876 4.876z m-1467.733-9.752c4.876 0 4.876-4.876 4.876-9.753 0-14.628 0-29.257-4.876-39.009-4.876-29.257-9.753-63.39-14.629-92.648 0-4.876 0-9.752-9.752-4.876-14.629 0-29.257 4.876-43.886 4.876 9.752 48.762 19.505 102.4 29.257 151.162 14.629-4.876 24.381-9.752 39.01-9.752z m1092.266 0c4.877 0 9.753-4.876 9.753-9.753-4.876-29.257-4.876-53.638-9.753-82.895 0-14.628-4.876-34.133-9.752-48.762 0-4.876 0-9.752-4.876-9.752-14.629 0-29.257 4.876-48.762 4.876 9.752 48.762 19.505 102.4 29.257 151.162 9.752 0 24.381 0 34.133-4.876z m346.21 9.752l4.876-4.876V351.086c-4.876-4.876-4.876-9.753-9.752-9.753-14.629 0-34.134 0-48.762 4.877 4.876 48.761 4.876 102.4 9.752 151.161 14.629-4.876 29.257-4.876 43.886-4.876z m-1097.143 0l4.876-4.876V351.086l-4.876-4.876c-14.629 0-34.133 0-48.762 4.876 4.876 48.762 4.876 102.4 9.753 151.162 14.628-9.753 24.38-9.753 39.009-9.753z"
        fill="#1296db"
      ></path>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'BilibiliState',
  setup() {
    const biliInfo = {
      following: 32,
      follower: 432,
      likes: '1.6万',
      plays: '57.4万',
    }
    const myLink = 'https://space.bilibili.com/2232379'
    const myName = '禾几元'
    return { ...biliInfo, myLink, myName }
  },
}
</script>

<style lang="scss" scoped>
$theme-color: #fb7299;
$card-height: 160px;

.bilibili-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: $card-height;
  padding: 10px;
  background-color: $theme-color;
  border-radius: 8px;
}

.avatar-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);

  img {
    height: 100%;
    border: 2px solid #fff6;
    border-radius: 50%;
  }

  a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 2px;
    font-size: 0.8rem;
    line-height: 80px;
    color: #eee;
    text-align: center;
    background-color: #0009;
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover a {
    opacity: 100%;
  }
}

.state-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 5px;

  p {
    margin: 0;
    color: #ffd8e4;
    text-align: center;
  }

  .bilibili-num {
    font-weight: bold;
    color: #fff4f5;
    text-align: center;
  }
}
</style>
